/*
 * @Author: sonss
 * @Date: 2024-08-22 13:19:13
 * @LastEditTime: 2024-08-29 19:35:29
 * @FilePath: /ss-file-antd/src/pages/Account/index.tsx
 * @Description:
 */

import { GenderLabelEnum } from '@/enums/stuff';
import { Detail } from '@/services/account';
import { PageContainer, ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Dropdown, Image } from 'antd';
import { MenuProps } from 'rc-menu';
import { useEffect, useState } from 'react';
import EditModule from './Modules/Edit';

const AccountIndexPage: React.FC = () => {
  const [info, setInfo] = useState<ACCOUNT.Info>({});
  const [actions, setActions] = useState<MenuProps['items']>([]);
  const [editor, setEditor] = useState<ACCOUNT.Info | undefined>();

  const reload = () => {
    Detail().then((res) => {
      if (res.code !== 0) {
        return;
      }

      const detail = res.data || {};
      const info = detail.info || {};
      setInfo(info);

      (() => {
        if (!info.id) {
          return;
        }

        setActions([
          {
            key: 'edit',
            label: '修改',
          },
        ]);
      })();
    });
  };

  useEffect(() => {
    reload();
  }, []);

  const closeEditor = () => {
    setEditor(undefined);
  };

  const onEditSuccess = () => {
    reload();
    closeEditor();
  };

  const handleAction: MenuProps['onClick'] = (e) => {
    switch (e.key) {
      case 'edit':
        setEditor(info);
        break;
    }
  };

  return (
    <>
      <PageContainer title="我的资料">
        <ProCard
          title="基本信息"
          extra={
            <Dropdown.Button menu={{ items: actions, onClick: handleAction }}>操作</Dropdown.Button>
          }
        >
          {info.avatar && (
            <div style={{ textAlign: 'center', marginBottom: '20px' }}>
              <Image
                src={info.avatar}
                style={{ width: '150px', height: '150px', borderRadius: '50%' }}
              />
            </div>
          )}
          <ProDescriptions bordered column={2}>
            <ProDescriptions.Item label="ID">{info.id}</ProDescriptions.Item>
            <ProDescriptions.Item label="标识">{info.code}</ProDescriptions.Item>
            <ProDescriptions.Item label="姓名">{info.fullname}</ProDescriptions.Item>
            <ProDescriptions.Item label="性别">
              {GenderLabelEnum.find((v) => v.value === info.gender)?.label}
            </ProDescriptions.Item>
            <ProDescriptions.Item label="手机号码">{info.mobile}</ProDescriptions.Item>
            <ProDescriptions.Item label="联系电话">{info.phone}</ProDescriptions.Item>
            <ProDescriptions.Item label="电子邮箱">{info.email}</ProDescriptions.Item>
            <ProDescriptions.Item label="出生日期">{info.birthday}</ProDescriptions.Item>
          </ProDescriptions>
        </ProCard>
      </PageContainer>
      {editor && <EditModule record={editor} onClose={closeEditor} onSuccess={onEditSuccess} />}
    </>
  );
};

export default AccountIndexPage;
